<template>
  <div>
    <div class="level" v-for="item in datas">
        <template v-if="item.type === 0">
            <p @click="handleClick(item)" class="dir">{{ item.dirname }}</p>
            <FileList v-show="item.expend" :datas="item.content"></FileList>
        </template>
        <p class="file" v-if="item.type === 1">{{ item.filename }} {{ item.size }}kb</p>
    </div>
  </div>
</template>

<script setup lang="ts" name="FileList">
interface File {
  filename: string;
  size: number;
  type: number;
}
interface Dir {
  dirname: string;
  content: BaseType[];
  type: number;
  expend: boolean;
}

type BaseType = File | Dir;
interface Props {
  datas: BaseType[];
}

const instance = getCurrentInstance().proxy;
console.log(instance)

const props = defineProps<Props>();
console.log('tst: ',props.datas)

const handleClick = (item: Dir)=>{
    console.log('click: ',item.expend)
    item.expend = !item.expend;
    instance.$forceUpdate(); // 强制刷新
}
</script>

<style lang="less" scoped>
.level {
    margin-left: 20px;
}

.file {
    background-color: gray;

}
.dir {
    cursor: pointer;
}
</style>